<template>
	<view>
		<view class="input-example">
			<view class="nine-box">
				<view class="nine-header">预约装修</view>
				<view class="nine-header1">RESERVATION FOR FREE ROOM</view>
			</view>
		</view>
		<view class="input1">
			<u-input v-model="value" :type="type" :border="border" @click="show = true" placeholder=" -请选择您所在的城市-"
				class="u-input" />
			<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback">
			</u-action-sheet>
			<u-input v-model="value1" type="text" :border="border" class="u-input" />
			<u-input v-model="value2" type="text" :border="border" class="u-input" />
			<u-input v-model="value3" type="text" :border="border" class="u-input" />
		</view>
		<button class="btn">立即预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value1: '',
				value2: '',
				value3: '',
				type: 'select',
				show: false,
				border: true,
				actionSheetList: [{
						text: '北京市'
					},
					{
						text: '上海市'
					},
					{
						text: '广州市'
					},
					{
						text: '深圳市'
					},
					{
						text: '济南市'
					},
					{
						text: '青岛市'
					},
					{
						text: '临沂市'
					},
					{
						text: '威海市'
					},
					{
						text: '烟台市'
					},
					{
						text: '潍坊市'
					},
				],

			}
		},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			}
		}
	}
</script>
<style lang="scss">
	.nine-box {
		margin: auto;
		width: 90%;
		margin-top: 150rpx;
		text-align: center;
	}

	.nine-header {
		font-size: 80rpx;
		color: #c4775d;
	}

	.nine-header1 {
		color: #91908f;
	}

	.input1 {
		width: 90%;
		margin: auto;

		.u-input {
			margin-top: 20px;
			height: 50px;
			margin: 0.5px;
		}
	}

	.btn {
		background-color: #c26636;
		line-height: 80rpx;
		color: white;
		text-align: center;
		font-weight: bold;
		margin-top: 20px;
		width: 90%;
	}
</style>
